import * as echarts from 'echarts';

const useEcharts = {
  /**
   * 渲染柱状图
   * @chartData {array} 图表数据 [{key:'状态', value: {已处理:1,待处理:2,进行中:3}}]
   * @chartForm {object} 配置数据
   * */
  rawBar(chartData, chartForm) {
    const myChart = echarts.init(document.getElementById('previewChart'));
    const legend = chartData.map((item) => item.key);
    myChart.clear();

    const option = {
      title: {
        text: chartForm.title,
        left: 'center',
      },
      //hover上去显示柱子的数据
      tooltip: {
        trigger: (chartForm.shadow && 'axis') || 'item',
        axisPointer: {
          type: 'shadow',
          shadowStyle: {
            color: 'rgba(0,0,0,.1)', //hover时shadow的背景色
          },
        },
      },
      color: chartForm.color, //调色盘
      legend: {
        show: !!chartForm.legendPosition, //图例是否显示
        left: chartForm.legendPosition?.split('-')[1],
        top: (chartForm.legendPosition?.includes('top') && 24) || 'auto',
        bottom: (chartForm.legendPosition?.includes('bottom') && 1) || 'auto',
        itemWidth: chartForm.legendSize?.split('-')[0] * 1,
        itemHeight: chartForm.legendSize?.split('-')[1] * 1,
        data: legend,
        textStyle: {
          color: '#a1a1a1',
        },
      },
      grid: {
        top: 70,
        left: chartForm.leftSpace,
        right: chartForm.rightSpace,
        bottom: chartForm.bottomSpace,
        containLabel: true, //true为防止标签溢出，类似自适应。默认false
      },
      xAxis: {
        name: chartForm.xName,
        data: chartForm.xAxisData,
      },
      yAxis: {
        name: chartForm.yName,
        axisLine: { show: true },
      },
      dataZoom: chartForm.dataZoom ? [{ type: 'inside' }, { type: 'slider' }] : [],
      series: legend.map((name, index) => {
        return {
          name, //图例
          type: 'bar',
          data: Object.values(chartData[index].value), //数据
          stack: chartForm.stack && 'test', //同名的柱子将堆叠在一起
          barWidth: chartForm.barWidth, //柱子宽度
          label: {
            show: !!chartForm.labelPosition, //是否显式的显示数据值，默认false
            position: chartForm.labelPosition, //数据值显示的位置
          },
          itemStyle: {
            borderRadius: chartForm.round && [20, 20, 0, 0], //（顺时针左上，右上，右下，左下）
          },
        };
      }),
    };

    myChart.setOption(option);
    myChart.resize(); //可关闭动画效果
    window.addEventListener('resize', () => {
      myChart.resize();
    });

    return option;
  },
  /**
   * 渲染折线图
   * @chartData {array} 图表数据 [{key:'状态', value: {已处理:1,待处理:2,进行中:3}}]
   * @chartForm {object} 配置数据
   * */
  rawLine(chartData, chartForm) {
    const myChart = echarts.init(document.getElementById('previewChart'));
    const legend = chartData.map((item) => item.key);
    myChart.clear();

    const option = {
      title: {
        text: chartForm.title,
        left: 'center',
      },
      //hover上去显示柱子的数据
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross', //鼠标移上去X Y轴有对应显示
        },
      },
      color: chartForm.color, //调色盘
      legend: {
        show: !!chartForm.legendPosition, //图例是否显示
        left: chartForm.legendPosition?.split('-')[1],
        top: (chartForm.legendPosition?.includes('top') && 24) || 'auto',
        bottom: (chartForm.legendPosition?.includes('bottom') && 1) || 'auto',
        itemWidth: chartForm.legendSize?.split('-')[0] * 1,
        itemHeight: chartForm.legendSize?.split('-')[1] * 1,
        data: legend,
        textStyle: {
          color: '#a1a1a1',
        },
      },
      grid: {
        top: 70,
        left: chartForm.leftSpace,
        right: chartForm.rightSpace,
        bottom: chartForm.bottomSpace,
        containLabel: true, //true为防止标签溢出，类似自适应。默认false
      },
      xAxis: {
        name: chartForm.xName,
        type: 'category',
        boundaryGap: false, //X轴刻度是否从最左端开始，false表示从最左端开始（默认true）
        data: chartForm.xAxisData,
        // data: Object.keys(chartData[0].value),
      },
      yAxis: {
        name: chartForm.yName,
        type: 'value',
        axisLine: { show: true },
      },
      dataZoom: chartForm.dataZoom ? [{ type: 'inside' }, { type: 'slider' }] : [],
      series: legend.map((name, index) => {
        return {
          name, //图例
          type: 'line',
          data: Object.values(chartData[index].value), //数据
          smooth: chartForm.smooth, //平滑曲线
          //填充透明度
          areaStyle: {
            opacity: chartForm.opacity / 100, //支持从 0 到 1 的数字，为 0 时不填充。
          },
          label: {
            show: !!chartForm.labelPosition, //是否显式的显示数据值，默认false
            position: chartForm.labelPosition, //数据值显示的位置
          },
          itemStyle: {
            borderRadius: chartForm.round && [20, 20, 0, 0], //（顺时针左上，右上，右下，左下）
          },
        };
      }),
    };

    myChart.setOption(option);
    myChart.resize();
    window.addEventListener('resize', () => {
      myChart.resize();
    });

    return option;
  },
  /**
   * 渲染饼图
   * @chartData {array} 图表数据 [{name:'已处理', value: 1},{name:'待处理', value: 2},{name:'进行中', value: 3}]
   * @chartForm {object} 配置数据
   * */
  rawPie(chartData, chartForm) {
    const myChart = echarts.init(document.getElementById('previewChart'));
    myChart.clear();

    const option = {
      title: {
        text: chartForm.title,
        left: 'center',
        // top: 10, //标题离顶部距离
      },
      tooltip: {
        trigger: 'item',
        // formatter: chartForm.tooltipFormatter,
      },
      color: chartForm.color, //调色盘
      legend: {
        show: chartForm.legendPosition, // 图例是否显示
        orient: chartForm.legendStyle || 'horizontal', //legend排列方式
        left: chartForm.legendPosition.split('-')[1],
        top: (chartForm.legendPosition.includes('top') && 26) || 'auto',
        bottom: (chartForm.legendPosition.includes('bottom') && 1) || 'auto',
        itemWidth: chartForm.legendSize.split('-')[0] * 1,
        itemHeight: chartForm.legendSize.split('-')[1] * 1,
        textStyle: {
          color: '#a1a1a1',
        },
      },
      series: [
        {
          type: 'pie',
          data: chartData, //图表数据
          // selectedMode: 'single', //选中模式，表示是否支持多个选中，默认false关闭，支持布尔值和字符串，字符串取值可选'single'，'multiple'，分别表示单选还是多选
          //饼图的半径。为数组时是环形图，分别是内环大小和外环直径
          radius:
            (chartForm.isRing && [
              chartForm.ringSize + '%', //内环大小
              chartForm.pieSize + '%', //外环直径
            ]) ||
            chartForm.pieSize + '%', //饼图半径
          roseType: chartForm.isRose && 'radius', //是否展示成南丁格尔图。radius扇区圆心角展现数据的百分比，半径展现数据的大小。area所有扇区圆心角相同（每块饼大小相同），仅通过半径展现数据大小。
          label: {
            show: !!chartForm.textPosition, //是否显示文字
            position: chartForm.textPosition, //文字显示在饼图内
            // formatter: chartForm.formatter, //自定义显示的内容
          },
        },
      ],
    };

    myChart.setOption(option);
    myChart.resize();
    window.addEventListener('resize', () => {
      myChart.resize();
    });

    return option;
  },
};
export default useEcharts;
